<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>商品详情列表</title>
		<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui.min.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui.theme.min.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="css/jqgrid/ui.jqgrid.css" />
	</head>

	<body>
		<table id="gridTable"></table>
		<div id="gridPager"></div>
	</body>
	<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
	<script src="js/jquery-ui.min.js" type="text/javascript"></script>
	<script src="js/jqgrid/jquery.jqGrid.min.js" type="text/javascript"></script>
	<script src="js/jqgrid/i18n/grid.locale-cn.js" type="text/javascript"></script>
	<script type="application/javascript">
		$(function() {
			$("#gridTable").jqGrid({
				url: 'http://127.0.0.1:8080/api/v1/shopSales',
				datatype: "json",
				colNames: ['id', '商品名称', '分类名称', '价格', '市场价', '品牌', '库存', '销售数量'],
				height: "auto",
				colModel: [{
					name: 'id',
					index: 'id',
					width: 200,
					hidden:true
				}, {
					name: 'shopInfo.title',
					index: 'shopInfo.title',
					width: 300
				}, {
					name: 'shopInfo.shopType.typeName',
					index: 'shopInfo.shopType.typeName',
					width: 150,
				},{
					name: 'shopInfo.price',
					index: 'shopInfo.price',
					width: 100,
				}, {
					name: 'shopInfo.markprice',
					index: 'shopInfo.markprice',
					width: 100,
				}, {
					name: 'shopInfo.brand',
					index: 'shopInfo.brand',
					width: 100,
				}, {
					name: 'productStock',
					index: 'productStock',
					width: 100,
				}, {
					name: 'salesNum',
					index: 'salesNum',
					width: 100,
				}],
				rowNum: 10,
				rowList: [10, 20, 30],
				pager: '#gridPager',
				sortname: 'oprtCatNo',
				mtype: "get",
				viewrecords: true,
				sortorder: "asc",
				caption: "商品分类列表",
				jsonReader : {
					root : "objList",
					page : "pageNum",
					total : "maxPage",
					records : "count",
					repeatitems : false
				},
			}); 
			jQuery("#gridTable").jqGrid('navGrid', '#gridPager', {
				edit: false,
				add: false,
				del: false
			});
		});
	</script>

</html>